<template>
  <div id="cesiumContainer">
    <div id="leftAndRightSlider" ref="lrSliderRef"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    this.initCesium()
    this.renderRollerShutter(this.viewer)
  },
  methods: {
    initCesium() {
      this.viewer = new Cesium.Viewer('cesiumContainer', {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: false,
        selectionIndicator: false, //是否显示选取指示器组件
        shouldAnimate: false, //自动播放动画控件
        shadows: true, //是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D
      })
      this.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
    },
    renderRollerShutter(viewer) {
      //加载倾斜数据
      this.viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
        url: 'http://localhost:8888/guyuan/qxsy/szc/tileset.json'
      })).readyPromise.then((tileset) => {
        this.viewer.zoomTo(tileset)
      })
      //获取到所有的图元数据
      let primitives = this.viewer.scene.primitives;
      //获取到首个图元数据
      let left = primitives.get(0);
      left.splitDirection = Cesium.SplitDirection.LEFT;
      console.log(left)
      //获取到滑动的div
      var slider =  this.$refs.lrSliderRef

      //计算场景切分的位置
      this.viewer.scene.splitPosition = (slider.offsetLeft) / slider.parentElement.offsetWidth;

      var handler = new Cesium.ScreenSpaceEventHandler(slider);
      var moveActive = false;
      let _this = this

      function move(movement) {
        if (!moveActive) {
          return;
        }
        //鼠标移动的屏幕坐标，x
        var relativeOffset = movement.endPosition.x;
        //计算场景的切分位置
        var splitPosition = (slider.offsetLeft + relativeOffset) / slider.parentElement.offsetWidth;
        slider.style.left = 100.0 * splitPosition + '%';
        _this.viewer.scene.splitPosition = splitPosition;
      }

      //鼠标按下激活移动状态
      handler.setInputAction(function () {
        moveActive = true;
      }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
      //触摸的逻辑
      handler.setInputAction(function () {
        moveActive = true;
      }, Cesium.ScreenSpaceEventType.PINCH_START);

      //鼠标或者触摸屏移动回调move函数
      handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);

      //鼠标弹起或者触摸结束，激活状态为false
      handler.setInputAction(function () {
        moveActive = false;
      }, Cesium.ScreenSpaceEventType.LEFT_UP);
      handler.setInputAction(function () {
        moveActive = false;
      }, Cesium.ScreenSpaceEventType.PINCH_END);
    }
  }
}
</script>
<style scoped>
#leftAndRightSlider {
  position: absolute;
  left: 50%;
  top: 0px;
  background-color: #d3d3d3;
  width: 5px;
  height: 100%;
  z-index: 9999;
}

#leftAndRightSlider:hover {
  cursor: ew-resize;
}

</style>
